<template>
    <div class="gmap_move_deagup" :draggable="type=='end' ? false : true">
        <slot></slot>   
    </div>
</template>
<script>
export default {
    props: ['type','datas'],
    mounted(){
        this.addListener()
    },
    data() {
        return {
        }
    },
    methods: {
        addListener(){
            if(this.type=='end')
            {
                this.$el.addEventListener('dragover', this.dragOver);
                this.$el.addEventListener('dragleave', this.dragLeave);
                this.$el.addEventListener('dragenter', this.dragEnter);
                this.$el.addEventListener("drop", this.dragDrop);
            }else
            {
                this.$el.addEventListener('dragstart', this.dragStart);
                this.$el.addEventListener('dragend', this.dragEnd);
            }
        },
        dragStart(e){
            this.$emit("dragStart",this.datas,e);
        },
        dragEnd(e){
            this.$emit("dragEnd",this.datas,e);
        },
        dragOver(e){
            e.preventDefault();
            this.$emit("dragOver",this.datas,e);
        },
        dragLeave(e){
            e.preventDefault();
            this.$emit("dragLeave",this.datas,e);
        },
        dragEnter(e){
            this.$emit("dragEnter",this.datas,e);
        },
        dragDrop(e){
            this.$emit("dragDrop",this.datas,e);
        },
        removeListener(){
            if(this.type=='end')
            {
                this.$el.removeEventListener('dragover', this.dragOver);
                this.$el.removeEventListener('dragleave', this.dragLeave);
                this.$el.removeEventListener('dragenter', this.dragEnter);
                this.$el.removeEventListener('drop', this.dragDrop);
            }
            else
            {
                this.$el.removeEventListener('dragstart', this.dragStart)
                this.$el.removeEventListener('dragend', this.dragEnd);
            }
        },
    },
    destroyed() {
        this.removeListener()
    }
}
</script>
<style scoped>
    .gmap_move_deagup
    {
        width: 100%;
        height: 100%;
        display: inherit;
    }
</style>  